<template>
  <div id="divcontent">
    <!-- <div class="title">
        智慧社区警网共治平台
      </div> -->
    <!-- <div class="loginformborder">
      <div class="loginform">
        <form class="kt-user-form">
          <div class="form-item">
            <label class="item-label">
              <img class="pic" src="../../../static/image/Login/user.png" />
            </label>
            <input
              autocomplete="false"
              type="text"
              v-model="username"
              placeholder="请输入用户名"
              class="item-input"
              maxlength="25"
            />
          </div>
          <div class="form-item">
            <label class="item-label">
              <img class="pic" src="../../../static/image/Login/pwd.png" />
            </label>
            <input
              autocomplete="false"
              type="password"
              v-model="password"
              placeholder="请输入密码"
              class="item-input"
              maxlength="25"
            />
          </div>
          <div class="form-item item-footer">
            <div class="item-checkbox">
              <label class="label" :class="{active:checked}">
                <input class="checkbox" style="margin-right:5px" type="checkbox" v-model="checked" />
                记住密码
              </label>
            </div>
            <div @click="forgetPwd" class="item-forget">忘记密码?</div>
          </div>
          <div class="form-btn">
            <button @click.prevent="login" type="submit" class="btn" style="cursor: pointer;">登录</button>
          </div>
        </form>
      </div>
    </div> -->
    <div class="content">
      <div style="flex:1;padding-left:120px;">
       <!-- <img src="../../../static/image/Login/back_pic.png" alt="">-->
      </div>
      <div style="flex:1">
        
        <div class="loginformborder1">
        <div class="title">
          <img src="../../../static/image/Login/title.png">
        </div>
         
          <form class="kt-user-form">
          <div class="label">账号 </div>
          <div class="form-item">
            <label class="item-label">
              <img class="pic" src="../../../static/image/Login/account.png" />
            </label>
            <input
              autocomplete="false"
              type="text"
              v-model="username"
              placeholder="请输入用户名"
              class="item-input"
              maxlength="25"
            />
          </div>
          <div class="label">密码</div>
          <div class="form-item">
            <label class="item-label">
              <img class="pic" src="../../../static/image/Login/password.png" />
            </label>
            <input
              autocomplete="false"
              type="password"
              v-model="password"
              placeholder="请输入密码"
              class="item-input"
              maxlength="15"
            />
          </div>
          <div class="item-footer">
            <div class="item-checkbox">
              <label class="label" :class="{active:checked}">
                <input class="checkbox" style="margin-right:5px" type="checkbox" v-model="checked" />
                记住密码
              </label>
            </div>
           
          </div>
          <div class="form-btn" >
            <button @click.prevent="login" type="submit" class="btn" style="cursor: pointer;  opacity: 0;">登录</button>
          </div>
        </form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
/*//登录表单边框*/
::-webkit-input-placeholder { /* WebKit browsers */
  color: #fff;

}
.label{
  width: 11rem;
  font-size:14px;
  color:#fff;
}
#divcontent {
  background: url(../../../static/image/Login/bc.jpg) no-repeat 0px 0px;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: relative;
  .content{
     height: 28.45rem;
       margin: 0 auto;
       display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
  }
  .title{

    text-align: center;
    font-size: 2.8rem;
    line-height: 5.5rem;
    font-weight: 500;
    // color: #01e7fe;
    // font-family:AddOrganization;
    width: 100%;
    // top: 20%;
    //  transform: translateY(-50%);
    letter-spacing: 10px;
  }
  .loginformborder1{
    background: url(../../../static/image/Login/biankuang.png) no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 30rem;
    margin: 2rem auto;
    padding: 2rem;
        padding-bottom: 4rem;
      .form-btn {
          margin: 1rem auto;
          width: 20rem;
          height: 44px;
          background: url(../../../static/image/Login/btnlogin.png) no-repeat;
          background-size: 100% 100%;
          background-position: center;
          .btn {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            background: transparent;
            text-align: center;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 30px;
            letter-spacing: 20px;
            color: #c9fbfe;
            &:visited,
            &:active,
            &:focus {
              border: none;
              outline: 0;
            }
          }
        }

    .form-item {
          width: 70%;
          height: 40px;
          // background-color: #4a4e72;
          // border-bottom: 2px solid #255784;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 0 0.5rem;
          box-sizing: border-box;
          margin: 1rem auto;
          .item-footer {
            border-bottom: none;
            padding-top: 3rem;
            box-sizing: border-box;
          }
          .item-label {
            width:40px;
            padding-top: 0.25rem;
            // width: 1rem;
            .pic {
              //width: 1rem;
              height:40px;
               width:40px;
            }
          }
          .item-input {
            width: calc(100% - 1.5rem);
            padding-left: 1rem;
            height: 100%;
            box-sizing: border-box;
            border: none;
            outline: none;
            // background: transparent;
            font-size: 1rem;
            // color: rgba(255, 255, 255, 0.8);
          }

        }
         .item-footer {
            width: 70%;
          height: 50px;
          border-bottom: 2px solid #255784;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 0 0.5rem;
          box-sizing: border-box;
          margin: 0.5rem auto;
            border-bottom: none;
            padding-top: 1rem;
            box-sizing: border-box;
            .item-checkbox {
            flex: 1;
            .label {
              width: 100%;
              position: relative;
              font-size: 0.9remx;
              color: rgba(255, 255, 255, 0.8);
              padding-left: 1.3rem;
              box-sizing: border-box;
              text-align: left;
              &:after {
                content: "";
                width: 0.9rem;
                height: 0.9rem;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                background: #fff;
                // border: 1px solid #fff;
                border-radius: 2px;
                text-align: center;
                line-height: 0.9rem;
              }
              &.active:after {
                font-family: "iconfont";
                content: "\e71a";
                font-size: 0.8rem;
                color: #255784;
              }
              input[type="checkbox"] {
                width: 0;
                height: 0;
                display: none;
              }
            }
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
          }
          .item-forget {
            flex: 1;
            text-align: right;
            font-size: 0.9rem;
            color:#00b1ff
            // color: rgba(255, 255, 255, 0.8);
          }
          }

  }

}
</style>
<script>
import { getCookie, setCookie, delCookie } from "@/config/cookie";
import { Login } from "@/api/loginApi";
//cookie 加密
import CryptoJS from "crypto-js";

// Encrypt 加密

export default {
  data() {
    return {
      mag: null,
      username: "",
      password: "",
      checked: false
      // bk_img="static/image/Login/bg_login.png";
    };
  },
  created() {},
  mounted() {
    if (getCookie("username") && getCookie("password")) {
      (this.username = getCookie("username")),

        (this.password = getCookie("password"));
        console.log(getCookie("password"))
      this.checked = true;
    }
  },

  methods: {
    //登陆
    async login() {
      let loginData = { username: this.username, password: this.password };
      if (this.username == "" || this.password == "") {
        this.$alert("请填写用户名或密码", "提示", {
          confirmButtonText: "确定"
        });
      } else {
        //记住密码
        if (this.checked) {
          setCookie("username", this.username, 7 * 24 * 60 * 60);
          setCookie("password", this.password, 7 * 24 * 60 * 60);
        } else {
          delCookie("username");
          delCookie("password");
        }
        let params = {
          username: this.username,
          password: this.password
        };
        const res = await Login(params);
        if (res.code == 200) {
          // this.$storage.set("tree", res.tree, 10);
          setCookie("isLogin", "true", 100000000);
          setCookie("username", this.username, 100000000);
          this.$storage.set("token", res.token, 300);
          this.$storage.set("user", { username: this.username }, 30);
          this.$router.replace({
            path: "/"
          });
        } else {
          this.$alert("登录失败", "提示", {
            confirmButtonText: "确定"
          });
        }
      }
    },
    //忘记密码
    forgetPwd() {
      this.$alert("请联系管理员", "提示", {
        confirmButtonText: "确定"
      });
    }
  }
};
</script>
